define(['dom'],function (D) {
   
   function Shopping(opt) {
      Object.assign(this,opt);
      this.init();
   }

   Shopping.prototype = {
      constructor:Shopping,
      init () {
          // 渲染页面
          this.render();
          // 绑定事件
          this.bindEvent();
      },
      render () {
         this.oTbody.innerHTML =  this.data.map(item=>{
             return `<tr>
                           <td>
                             <input type="checkbox" name="" id="">
                           </td>
                           <td>
                               <img src="${item.img}" alt="">
                               <p>${item.name}</p>
                           </td>
                           <td>
                                ${item.price}
                           </td>
                           <td>
                               <button>-</button>
                               <input type="text" maxlength="4" id="num" value="1">
                               <button>+</button>
                           </td>
                           <td>
                                ${item.price}
                           </td>
                     </tr>
             `;
         }).join("");
         this.oCount = D.get('#num');
      },
      bindEvent () {
          this.oTbody.addEventListener('click',(e=window.event)=>{
             var tar = e.target || e.srcElement;
             if (tar.nodeName === "BUTTON") {
                 // 减
                 if (tar.innerHTML==='-') {
                    tar.nextElementSibling.value = tar.nextElementSibling.value*1 === 1 ? 1 : --tar.nextElementSibling.value;
                 }else if (tar.innerHTML ==="+") {
                    tar.previousElementSibling.value = +tar.previousElementSibling.value+1;
                 }
                 var price = tar.parentNode.previousElementSibling.innerHTML*1;  // 价格
                 var td = tar.parentNode;
                 var count =td.children[1].value *1;   //     D.get('#num').value*1; // 数量
                 // 小计
                 tar.parentNode.nextElementSibling.innerHTML= price * count;
                 this.updateSum();
             } else if(tar.nodeName==="INPUT"){
                 // tbody 里面的复选框
                 var inputs = D.gets('input[type="checkbox"]',this.oTbody);
                 console.log(inputs);
                 // 是否多选
                 this.oAll.checked = [...inputs].every(item=>{
                     return item.checked;
                 });
                 // 计算总量  总金额
                 this.updateSum();
             }
          });

          // 多选功能
          this.oAll.addEventListener('click',()=>{
              var inputs = D.gets('input[type="checkbox"]',this.oTbody);
              [...inputs].forEach(item=>{
                   item.checked = this.oAll.checked;
              });
              this.updateSum();
          })
          
          // 输入框
          this.oCount.addEventListener('input',()=>{
              var num = this.oCount.value; // 数量
              var reg = /^[1-9]\d{0,3}$/; // 验证0到4位数的number
              var td = this.oCount.parentNode; 
              if (reg.test(num)) {
                 td.nextElementSibling.innerHTML = num * td.previousElementSibling.innerHTML;
                 this.updateSum();
              }

              if (isNaN(+num)){
                  this.oCount.value = 1;

              }

          })
          

      },
      updateSum () {
          var inputs = D.gets('input[type="checkbox"]',this.oTbody);
          var sum=0;
          var sumPrice =0;
          [...inputs].forEach(item=>{
              if (item.checked) {
                  var tr = item.parentNode.parentNode;
                  sum = sum+ tr.children[3].children[1].value*1; // 总量
                  sumPrice += tr.children[4].innerHTML*1; // 总金额
              } 
          });
          this.oTfoot.children[0].children[1].children[1].innerHTML = sum;
          this.oTfoot.children[0].children[2].children[1].innerHTML = sumPrice;
      }
   }

   return Shopping;
});